'use client';
import { Avatar, Card, Col, Row } from 'antd';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import Title from 'antd/es/typography/Title';
import Paragraph from 'antd/es/typography/Paragraph';
import { useState } from 'react';
import CalendarsChart from '@/app/user/center/components/CalendarsChart';

/**
 * 用户中心页面
 */
export default function UserCenterPage() {
  const loginUser = useSelector((state: RootState) => state.loginUser);
  const user = loginUser;
  const [activeTabKey, setActiveTabKey] = useState<string>('record');
  return (
    <div id="user-center-page">
      <Row gutter={[16, 16]}>
        <Col xs={24} md={6}>
          <Card style={{ textAlign: 'center' }}>
            <Avatar src={user.avatar} size={72} />
            <div style={{ marginBottom: 16 }}></div>
            <Card.Meta
              title={
                <Title level={4} style={{ marginBottom: 0 }}>
                  {user.nickname}
                </Title>
              }
              description={
                <Paragraph type={'secondary'}>{user.userProfile}</Paragraph>
              }
            ></Card.Meta>
          </Card>
        </Col>
        <Col xs={24} md={18}>
          <Card
            tabList={[
              {
                key: 'record',
                label: '刷题记录',
              },
              {
                key: 'other',
                label: '其他',
              },
            ]}
            activeTabKey={activeTabKey}
            onTabChange={(key: string) => {
              setActiveTabKey(key);
            }}
          >
            {activeTabKey === 'record' && (
              <>
                <CalendarsChart />
              </>
            )}
          </Card>
        </Col>
      </Row>
    </div>
  );
}
